<template>
  <div class="m_banner_main">
    <div class="banner_panel">
      <!-- 首页 -->
      <div class="banner_item">
        <div class="item">
          <router-link to="/">
            <div class="icon">
              <svg viewBox="0 0 24 24">
                <g>
                  <path
                    d="M21.591 7.146L12.52 1.157c-.316-.21-.724-.21-1.04 0l-9.071 5.99c-.26.173-.409.456-.409.757v13.183c0 .502.418.913.929.913h6.638c.511 0 .929-.41.929-.913v-7.075h3.008v7.075c0 .502.418.913.929.913h6.639c.51 0 .928-.41.928-.913V7.904c0-.301-.158-.584-.408-.758zM20 20l-4.5.01.011-7.097c0-.502-.418-.913-.928-.913H9.44c-.511 0-.929.41-.929.913L8.5 20H4V8.773l8.011-5.342L20 8.764z"
                  ></path>
                </g>
              </svg></div
          ></router-link>
        </div>
      </div>
      <!-- 搜索 -->
      <div class="banner_item">
        <div class="item">
          <router-link to="/Search">
            <div class="icon">
              <svg viewBox="0 0 24 24">
                <g>
                  <path
                    d="M10.25 3.75c-3.59 0-6.5 2.91-6.5 6.5s2.91 6.5 6.5 6.5c1.795 0 3.419-.726 4.596-1.904 1.178-1.177 1.904-2.801 1.904-4.596 0-3.59-2.91-6.5-6.5-6.5zm-8.5 6.5c0-4.694 3.806-8.5 8.5-8.5s8.5 3.806 8.5 8.5c0 1.986-.682 3.815-1.824 5.262l4.781 4.781-1.414 1.414-4.781-4.781c-1.447 1.142-3.276 1.824-5.262 1.824-4.694 0-8.5-3.806-8.5-8.5z"
                  ></path>
                </g>
              </svg></div
          ></router-link>
        </div>
      </div>
      <!-- 通知 -->
      <div class="banner_item">
        <div class="item">
          <router-link to="/Notify">
            <div class="icon">
              <el-badge :is-dot="isDot">
                <svg viewBox="0 0 24 24">
                  <g>
                    <path
                      d="M19.993 9.042C19.48 5.017 16.054 2 11.996 2s-7.49 3.021-7.999 7.051L2.866 18H7.1c.463 2.282 2.481 4 4.9 4s4.437-1.718 4.9-4h4.236l-1.143-8.958zM12 20c-1.306 0-2.417-.835-2.829-2h5.658c-.412 1.165-1.523 2-2.829 2zm-6.866-4l.847-6.698C6.364 6.272 8.941 4 11.996 4s5.627 2.268 6.013 5.295L18.864 16H5.134z"
                    ></path>
                  </g>
                </svg>
              </el-badge></div
          ></router-link>
        </div>
      </div>
      <!-- 个人资料 -->
      <div class="banner_item">
        <div class="item" @click="openDrawerMain">
          <div class="icon">
            <svg viewBox="0 0 512 512">
              <path
                d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
              />
              <path
                d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
    <!-- 抽屉页面 -->
    <el-drawer
      title="我是标题"
      :visible.sync="drawerMain"
      :append-to-body="true"
      direction="ltr"
      size="50%"
      :with-header="false"
    >
      <div class="drawer_main">
        <!-- 头像区域 -->
        <div class="header_main">
          <!-- 头像 -->
          <div class="user_av">
            <img class="user_h_img" :src="user_headimg" alt="" />
          </div>
          <!-- 昵称与账号信息 -->
          <div class="user_panel">
            <!-- 昵称 昵称后包含认证标识-->
            <div class="user_n">
              <div class="name">
                {{ user_nickname }}
              </div>
              <!-- 用户认证 -->
              <div
                v-if="auth_id == 1"
                :title="$t('postlist.auth_personal')"
                class="auth personal"
              >
                <svg data-v-54c1ae8e="" viewBox="0 0 22 22">
                  <g data-v-54c1ae8e="">
                    <path
                      data-v-54c1ae8e=""
                      d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"
                    ></path>
                  </g>
                </svg>
              </div>
              <div
                v-if="auth_id == 2"
                :title="$t('postlist.auth_organizaion')"
                class="auth organizaion"
              >
                <svg data-v-54c1ae8e="" viewBox="0 0 22 22">
                  <g data-v-54c1ae8e="">
                    <path
                      data-v-54c1ae8e=""
                      d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"
                    ></path>
                  </g>
                </svg>
              </div>
            </div>
            <!-- 账号 -->
            <div class="user_acc">@{{ account }}</div>
          </div>
        </div>
        <!-- 列表 -->
        <div class="list_panel">
          <!-- 首页 -->
          <router-link class="alink" :to="'/'"
            ><div class="item">{{ $t('drawerbanner.index') }}</div></router-link
          >
          <!-- 认证 -->
          <router-link class="alink" :to="'/Auth'"
            ><div class="item">{{ $t('drawerbanner.auth') }}</div></router-link
          >
          <!-- 个人资料 -->
          <router-link class="alink" :to="'/Personal'"
            ><div class="item">{{ $t('drawerbanner.personal') }}</div></router-link
          >
          <!-- 更多 -->
          <router-link class="alink" :to="'/Setting'"
            ><div class="item">{{ $t('drawerbanner.setting') }}</div></router-link
          >
          <!-- 退出 -->
          <div class="item logout" @click="logout">
            <div>
              <svg
                viewBox="0 0 24 24"
              >
                <g>
                  <path
                    d="M4 4.5C4 3.12 5.12 2 6.5 2h11C18.88 2 20 3.12 20 4.5v15c0 1.38-1.12 2.5-2.5 2.5h-11C5.12 22 4 20.88 4 19.5V16h2v3.5c0 .28.22.5.5.5h11c.28 0 .5-.22.5-.5v-15c0-.28-.22-.5-.5-.5h-11c-.28 0-.5.22-.5.5V8H4V4.5zm6.95 3.04L15.42 12l-4.47 4.46-1.41-1.42L11.58 13H2v-2h9.58L9.54 8.96l1.41-1.42z"
                  ></path>
                </g>
              </svg>
            </div>
            <div class="txt">{{ $t('drawerbanner.logout') }}</div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
  <script>
export default {
  name: "MainBannerComponents",
  props: {
    notifyCounts: Number,
  },
  data() {
    return {
      user_id: JSON.parse(localStorage.getItem("user")).user_id,
      auth_id: JSON.parse(localStorage.getItem("user")).auth_id
        ? JSON.parse(localStorage.getItem("user")).auth_id
        : 0,
      user_nickname: JSON.parse(localStorage.getItem("user")).user_nickname
        ? JSON.parse(localStorage.getItem("user")).user_nickname
        : "账号",
      account: JSON.parse(localStorage.getItem("user")).username
        ? JSON.parse(localStorage.getItem("user")).username
        : "账号",
      user_headimg: JSON.parse(localStorage.getItem("user")).user_headimg
        ? JSON.parse(localStorage.getItem("user")).user_headimg
        : require("@/assets/img/user.png"),
      isDot: false, //消息提示
      drawerMain: false,
    };
  },
  mounted() {
    this.loadNotify();
  },
  methods: {
    loadNotify() {
      if (this.notifyCounts > 0) {
        this.isDot = true;
      } else {
        this.isDot = false;
      }
    },
    //打开右侧菜单
    openDrawerMain() {
      this.drawerMain = true;
    },
    //退出登录
    logout(){
      // 清除状态保持
      window.localStorage.clear();
      // 状态保持清除后刷新页面
      window.location.reload();
    }
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 移动端下生效 */
.m_banner_main {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0.9);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  height: 52px;
}
.banner_panel {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.banner_item {
  display: flex;
  width: 25%;
}

.banner_item .item {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
  flex-grow: 1;
  align-items: center;
}

.banner_item svg {
  width: 26px;
  height: 26px;
}

.item .icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  line-height: 55px;
}

.item a:active .icon {
  background-color: rgba(0, 0, 0, 0.2);
}

/* 移动端 */
.drawer_main {
  display: flex;
  flex-direction: column;
}

.header_main {
  display: flex;
  padding: 20px 16px;
}

.user_h_img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.user_av {
  margin-right: 5px;
}

.user_panel {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.user_n {
  display: flex;
}

.user_n .name {
  max-width: 80px;
  line-height: 24px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.user_acc {
  max-width: 90px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.auth {
  width: 20px;
  height: 20px;
  fill: rgba(29, 155, 240, 0);
  cursor: pointer;
  margin-right: 5px;
}

.personal {
  fill: rgba(29, 155, 240, 1);
}

.organizaion {
  fill: rgba(255, 215, 0, 1);
}

/* 菜单列表 */
.list_panel {
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;
  padding: 8px 16px;
}

a.alink {
  color: rgba(0, 0, 0, 1);
  font-weight: 700;
}

.logout svg{
  width:20px;
  height:20px;
}

.logout .txt{
  line-height: 20px;
}

.item:hover {
  background-color: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

@media screen and (max-width: 720px) {
  .m_banner_main {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 99;
  }
}
</style>